// 该文件专门用于创建整个应用的路由器
import About from "../pages/About";
import Home from "../pages/Home";
import News from "../pages/News";
import Message from "../pages/Message";
import Detail from "../pages/Detail";
import { createRouter, createWebHashHistory } from "vue-router";
import { name } from "pubsub-js";
import { KeepAlive } from "vue";

const routes = [
    //一级路由
    {
        name:'guanyu',
        path: '/about',
        component: About,
        meta:{
            title:'关于',
            isAuth: true
        }
    },
    {
        name:'zhuye',
        path: '/home',
        component: Home,
        meta:{title:'主页'},
        children:[
            {
                name:'xinwen',
                path: 'news',
                component: News,
                meta:{
                    title:'新闻',
                    isAuth: true
                },
                // beforeEnter(to, from, next) {
                //     if(to.meta.isAuth){//判断是否需要鉴权
                //         if(localStorage.getItem('person') === 'aurora'){
                //             next()
                //         }else{
                //             alert('人员信息错误，无权限查看')
                //         }
                //     }else{
                //         next()
                //     }
                // },
            },
            {
                name:'xiaoxi',
                path: 'message',
                component: Message,
                children:[
                    {
                        name:'xiangqing',
                        // path: 'detail/:id/:title',
                        path: 'detail',
                        component: Detail,
                        meta:{
                            title:'消息'
                        },
                        //props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件
                        // props:{
                        //     a: 'aa',
                        //     b: 'bb'
                        // }

                        //第二种写法，值为布尔，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给dDetail组件
                        // props:true

                        //第三种写法，值为函数
                        // props($route){
                        //     return {
                        //         id: $route.query.id,
                        //         title: $route.query.title
                        //     }
                        // }
                        //使用连续解构赋值进行简化
                        props({query:{id, title}}){
                            return {
                                id,title
                            }
                        }

                    }
                ]
            },
        ]
    }
]

const router = createRouter({
    history: createWebHashHistory(process.env.BASE_URL),
    routes
})
//全局前置路由守卫-初始化时被调用、每次路由切换之前被调用
// router.beforeEach((to, from, next)=>{
//     console.log('全局前置路由守卫被调用')
//     // if(to.path === '/home/message' || to.path === '/home/news'){
//     // if(to.name === 'xiaoxi' || to.name === 'xinwen'){
//     if(to.meta.isAuth){//判断是否需要鉴权
//         if(localStorage.getItem('person') === 'aurora'){
//             next()
//         }else{
//             alert('人员信息错误，无权限查看')
//         }
//     }else{
//         next()
//     }
// })

//全局后置路由守卫-初始化时被调用、每次路由切换之后被调用
// router.afterEach((to, from)=>{
//     document.title = to.meta.title || '路由为/时展示'
// })

export default router;